/* 通用样式 */
body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #000000;  /* 黑色背景，增强深沉的视觉效果 */
    color: #e0e0e0;  /* 灰白色字体 */
    font-size: 18px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow: hidden;  /* 防止页面滚动条 */
}

header {
    background-image: url('images/shizhong.png');
    background-size: cover;
    background-position: center;
    color: #feffef;
    height: 20vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);  /* 增强阴影效果 */
}

header h1 {
    font-family: 'Noto Serif SC', serif; /* 设置为毛笔字风格的字体 */
    font-size: 60px;
    margin: 0;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.5); /* 微弱的发光效果 */
}

header img {
    position: absolute;
    left: 20px; /* 将 logo 移动到页面左侧，距左边 20px */
    top: 30%; /* 让 logo 垂直居中 */
    transform: translateY(-40%); /* 调整图片在垂直方向的居中显示 */
    height: 100px; /* 保持原有高度 */
}

/* 添加粒子背景 */
#particles-js {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* 保证粒子背景位于内容的下方 */
}

.content {
    padding: 40px;
    flex-grow: 1;
    position: relative; /* 确保内容位于粒子背景之上 */
    z-index: 1; /* 使内容位于粒子背景之上 */
}

/* container1 保持队伍和当前环节 */
.container1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
    margin-top: -1cm; /* 将整个 container1 上移 1cm */
}

/* 调整队伍名称与辩题名称之间的间隔 */
.container1 .team-section {
    display: flex;
    justify-content: space-between;  /* 仍然使用 space-between 来使队伍名称分布两侧 */
    width: 80%;
    margin-bottom: 5px;
    gap: 20cm; /* 设置队伍名称之间的间隔为 20cm */
    color: #e0e0e0; /* 灰白色文字 */
}

/* 调整辩题名称和队伍名称的间隔 */
.container1 .debate-topic {
    font-size: 25px;  /* 调整辩题名称的字号 */
    margin-bottom: -20px;  /* 调整上下间隔 */
    color: #e0e0e0; /* 灰白色文字 */
}

/* 调整队伍名称的字体大小 */
.container1 .team-section .team {
    font-size: 14px;  /* 调整队伍名称字号 */
    text-align: center;
}

.container1 .round-section {
    font-size: 26px;
    font-weight: bold;
    margin-top: 5px;  /* 减小上下间隔 */
    margin-bottom: -5px;  /* 减小上下间隔 */
    color: #e0e0e0;  /* 灰白色文字 */
}

/* layout2: 计时器布局 */
.layout2 .container2 {
    display: flex;
    justify-content: center;  /* 使计时器居中 */
    width: 100%;
    gap: 2cm;  /* 设置计时器之间的间隔为 2cm */
}

.layout2 .timer-section {
    display: flex;
    justify-content: space-between;  /* 让两个计时器左右排列，间隔相等 */
    width: 80%;
}

.timer {
    font-size: 100px;
    padding: 20px;
    border-radius: 10px;
    background-color: #1a1a1a;  /* 深黑背景，突出科技感 */
    border: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* 增强阴影效果 */
    width: 300px;
    text-align: center;
    color: #00eaff;  /* 青色字体，符合现代科技感 */
    text-shadow: 0 0 15px rgba(0, 255, 255, 0.8); /* 发光效果 */
}

/* container2 控制计时器布局（当处于 layout1 时） */
.container2 {
    display: flex;
    justify-content: center;  /* 使计时器居中 */
    width: 100%;
    margin-top: 20px;  /* 减少计时器和当前环节之间的间隔 */
}

.layout1 .container2 {
    margin-top: 30px;
}

.layout1 .timer-section {
    text-align: center;
    margin-bottom: 15px;  /* 减少计时器和当前环节之间的间隔 */
}

/* footer 样式 */
footer {
    background-color: #000000;  /* 深灰色背景 */
    color: #00eaff;  /* 青色字体 */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: auto; /* 将 footer 置底 */
    width: 100%;
    padding: 10px 0;
}

.control-button {
    cursor: pointer;
    padding: 20px;
    margin: 10px;
    text-align: center;
    background-color: #444c56;  /* 深色按钮背景 */
    color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* 增强按钮阴影效果 */
    transition: background-color 0.3s ease;
}

/* 按钮悬停效果 */
.control-button:hover {
    background-color: #00eaff;  /* 悬停时按钮变为青色 */
}

/* 隐藏元素的样式 */
.hidden {
    display: none;
}

/* 状态提示信息 */
#currentRound {
    font-size: 24px;
    font-weight: bold;
    margin-top: 20px;
    color: #00eaff;  /* 发光青色文字 */
}

/* 添加新样式，确保启动正方和反方按钮仅在 layout2 显示 */
.layout2 .control-button {
    display: inline-block;
}

.layout1 .control-button#startLeftBtn,
.layout1 .control-button#startRightBtn {
    display: none;
}

/* 当在 layout2 布局时显示启动正方和反方按钮 */
.layout2 .control-button#startLeftBtn,
.layout2 .control-button#startRightBtn {
    display: inline-block;
}

/* 防止按钮被错误隐藏 */
#startLeftBtn,
#startRightBtn {
    display: none;
}

/* 计时器呼吸动画 */
@keyframes breathing {
    0% {
        transform: scale(1);
        color: #00eaff;  /* 初始颜色 */
    }
    50% {
        transform: scale(1.2);
        color: #ff6f00;  /* 中间时变为橙色 */
    }
    100% {
        transform: scale(1);
        color: #00eaff;  /* 恢复青色 */
    }
}

.timer.breathing {
    animation: breathing 1s infinite;
}

/* 登录按钮样式 */
.login-section {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}

.login-button {
    position: relative; /* 添加这行以支持伪元素定位 */
    padding: 12px 25px;
    background-color: rgba(68, 76, 86, 0.4); /* 降低背景透明度 */
    color: rgba(255, 255, 255, 0.8); /* 降低文字透明度 */
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transform: translateY(0);
}

.login-button:hover {
    background-color: rgba(0, 234, 255, 0.6); /* 降低悬停时的透明度 */
    color: rgba(255, 255, 255, 1); /* 悬停时文字完全不透明 */
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 234, 255, 0.3);
}

/* 登录按钮鼠标跟踪效果 */
.login-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        circle at var(--mouse-x, 0) var(--mouse-y, 0),
        rgba(255, 255, 255, 0.2) 0%,
        transparent 50%
    );
    border-radius: 25px; /* 确保与按钮圆角一致 */
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.login-button:hover::before {
    opacity: 1;
}

/* 模态框样式优化 */
.modal {
    display: none;
    position: fixed;
    z-index: 1001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal.show {
    opacity: 1;
}

.modal-content {
    background-color: rgba(26, 26, 26, 0.95);
    margin: 15% auto;
    padding: 25px;
    border: 1px solid rgba(68, 76, 86, 0.5);
    width: 320px;
    border-radius: 15px;
    color: #e0e0e0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    transform: translateY(-30px);
    opacity: 0;
    transition: all 0.3s ease;
}

.modal.show .modal-content {
    transform: translateY(0);
    opacity: 1;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover {
    color: #00eaff;
}

/* 登录表单样式 */
#loginForm {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

#loginForm input {
    padding: 10px;
    border: 1px solid #444;
    border-radius: 5px;
    background-color: #2a2a2a;
    color: #e0e0e0;
}

#loginForm button {
    padding: 10px;
    background-color: #444c56;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

#loginForm button:hover {
    background-color: #00eaff;
}

.error-message {
    color: #ff4444;
    font-size: 14px;
    text-align: center;
    margin-top: 10px;
}

/* 管理员按钮的显示/隐藏样式 */
.admin-only {
    display: none;
}

.admin-only.show {
    display: inline-block;
    animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
